import { Input, InputNumber, Space } from "antd";

export default function DigitRange({
  onChange,
  value,
  placeholders,
  id,
  separatorWidth = 40,
                                   }: {
  onChange?: (val?: [number,number])=>void,
  value?: [number,number],
  placeholders?: [string, string],
  id?: string;
  separatorWidth?: number
}){
  return <Space.Compact>
    <InputNumber<number>
      placeholder={placeholders?.[0]}
      id={id ? `${id}-0` : undefined}
      style={{ width: `calc((100% - ${separatorWidth}px) / 2)` }}
      value={value?.[0]}
      onChange={(val) => onChange?.([val, value?.[1]])}
    />
    <Input
      style={{
        width: separatorWidth,
        textAlign: 'center',
        borderInlineStart: 0,
        borderInlineEnd: 0,
        pointerEvents: 'none',
        // backgroundColor: token?.colorBgContainer,
      }}
      placeholder='至'
      disabled
    />
    <InputNumber<number>
      placeholder={placeholders?.[1]}
      id={id ? `${id}-1` : undefined}
      style={{
        width: `calc((100% - ${separatorWidth}px) / 2)`,
        borderInlineStart: 0,
      }}
      value={value?.[1]}
      onChange={(val) => onChange?.([value?.[0], val])}
    />
  </Space.Compact>


}
